<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="head_back posabs zin-1 wth100" style="top: 0;" :style="{ paddingTop: topHight + 'px'}">
		</view>
		<view class="row just_cont_c" style="height: 160rpx;" :style="{ marginTop: topHight + 'px'}">
			<view class="disflex rad50 background_f just_cont_c align_item_c" style="width: 132rpx;height: 130rpx;">
				<u-avatar :src="userinfo.avatar" size="60"></u-avatar>
			</view>
			<view class="column minleft20 colf font500 size30">
				{{ userinfo.nickname }}
				<view class="mintop30">
					账户：{{ userinfo.phone }}
				</view>
			</view>
		</view>
		<view class="min30 background_f rad2 pad20 size30 font600 col0">
			我的银行卡
			<view class="row min30_rl just_cont_spacebet font500 col3 padbottom20 mintop40 align_item_c"
				style="border-bottom: 2rpx solid #e7e7e7;" v-for="(bank_item,bank_index) in bank_list">
				<view class="column">
					{{ bank_item.bank }}
					<view class="mintop20">
						{{ bank_item.bank_number }}
					</view>
				</view>
				<view class="col6 size26" @click="getDelBank(bank_item.id)">
					删除
				</view>
			</view>
			<view class="font500" style="margin: auto;margin-top: 60rpx;width: 300rpx;">
				<u-button text="添加银行卡" shape="circle" color="#3C70F5" hairline="false" size="normal"
					@click="$jump.nav('/mypackage/store/add_bankcard')"></u-button>
			</view>
		</view>
		<view class="min30_rl background_f rad2 pad20 size30 font600 col0">
			设置
			<view class="row min30_rl just_cont_spacebet font500 col3 padbottom20 mintop40 size30"
				style="border-bottom: 2rpx solid #e7e7e7;" @click="$jump.nav('/mypackage/user/set')">
				修改资料
				<u-icon name="arrow-right" color="#666" size="11"></u-icon>
			</view>
			<button class="weixin-btn row just_cont_spacebet font500 col3 size30"
				style="margin: auto 30rpx;margin-top: 40rpx;padding-bottom: 20rpx;" open-type="contact">
				联系客服
				<u-icon name="arrow-right" color="#666" size="11"></u-icon>
			</button>
		</view>

		<view class="min30">
			<u-button text="退出登录" shape="circle" type="primary" color="#FFAD4C" @click="getLogout"></u-button>
		</view>
		<!-- 底部tab -->
		<block>
			<storeTab :item="2"></storeTab>
		</block>
		<!-- 底部tab -->
	</view>
</template>

<script>
	import storeTab from "@/components/tabBar/storeTab.vue"
	export default {
		components: {
			storeTab
		},
		data() {
			return {
				topHight: '',
				user_id: '',
				userinfo: {},
				page: 0,
				bank_list: [],
				title: '00001',
				bankList: ['中国建设银行', '中国工商银行']

			}
		},
		onLoad() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight + 42
			this.user_id = uni.getStorageSync('user_id');
		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			const token = uni.getStorageSync('token');
			if (token) {
				//如果存在token
				this.getUserinfo()
				this.getBankList()
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {

				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		methods: {
			async getUserinfo() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/user_info/" + this.user_id)
				if (code == 200) {
					this.userinfo = data

				} else {
					console.log(message);
				}
			},
			async getBankList() {
				this.page++
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/bank_cards_list/" + this.user_id, {
					page: this.page,
				})
				if (code == 200) {
					this.bank_list.push(...data.items)
					if (data.items.length == 0) {
						return
					} else {
						this.getBankList()
					}
				} else {
					console.log(message);
				}
			},
			async getDelBank(id) {
				let {
					code,
					message,
					data
				} = await this.$com.fetchDel("member/bank_del/" + id)
				if (code == 200) {
					this.$com.toast(message)
					this.page = 0
					this.bank_list = []
					this.getBankList()
				} else {
					console.log(message);
				}
			},
			async getLogout() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchDel("login/user_logout/" + this.user_id)
				if (code == 200) {
					uni.removeStorageSync('user_type');
					uni.removeStorageSync('user_id');
					uni.removeStorageSync('token');
					uni.showToast({
						title: message,
						icon: 'none'
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/store/index'
						});
					}, 1000);

				} else {
					console.log(message);
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.head_back {
		height: 160rpx;
		background: linear-gradient(63deg, #FF515E 0%, #FF7F3E 100%), linear-gradient(167deg, #FF6B4A 0%, rgba(255, 123, 77, 0) 100%);
	}

	.weixin-btn {
		background: none;
		margin: 0;
		padding: 0;
		height: unset;

		&:before,
		&:after {
			border: none;
		}
	}
</style>